$(function () {
    var newDiv = $('.new-content1')
    var hotDiv = $('.hot-content1')
    var goodsDiv = $('.goods-content1')


    var spans = $('.title')
    getData('play/new')
    $.each(spans, function (index, el) {
        $(el).click(function () {
            $('.active').removeClass('active')
            $(this).addClass('active')
            var contentName = $(this).attr('content1')
            if (contentName === 'new-content') {
                newDiv.show()
                hotDiv.hide()
                goodsDiv.hide()
                getData('play/new')

            } else if (contentName === 'hot-content') {
                newDiv.hide()
                hotDiv.show()
                goodsDiv.hide()
                getData('play/hot')
            } else if (contentName === 'category-content') {
                newDiv.hide()
                hotDiv.hide()
                goodsDiv.show()
                getData('play/category')
            }
        })
    })

    function getData(url1) {
        $.ajax({
            url: 'http://localhost:3000/' + url1,
            type: 'get',
            success(data) {
                // console.log(data);
                // console.log(data[0][0].text);
                // debugger

                var str = '';
                if (url1 === 'play/new') {
                    for (var i = 0; i < data.length; i++) {
                        for (var j = 0; j < 8; j++) {
                            str += '<div class=imgs><img src=../img/hot'
                                + (j + 1) + '.jpg>' + '</img><p class=text>' +
                                data[i][j].text + '</p><p class=text1>' + data[i][j].price +
                                '<span><img src=../css/img/zan.png>3<img src=../css/img/xin.png>3</span></p></div>'
                        }
                    }
                    newDiv.html(str)
                } else if (url1 === 'play/hot') {
                    for (var i = 0; i < data.length; i++) {
                        var str = '';
                        var num = 0
                        for (var j = 8; j > 0; j--) {
                            str += '<div class=imgs><img src=../img/hot'
                                + j + '.jpg>' + '</img><p class=text>' +
                                data[i][num].text + '</p><p class=text1>' +
                                data[i][num].price + '<span><img src=../css/img/zan.png>3<img src=../css/img/xin.png>3</span></p></div>'
                            num++
                        }
                        num = 0
                    }
                    hotDiv.html(str)
                } else if (url1 === 'play/category') {
                    // console.log(data[0].list[0].productName);
                    // console.log(data[0].list);
                    console.log(data);
                    for(var j=0;j<data.length;j++){
                        str+='<div class=goods-content2><p class=top-title>'+
                        data[j].title
                        for(var i=0; i<data[j].list.length;i++){
                            // productName值
                            // console.log(data[j].list[i].productName);
                            str+='<div class=minBox><img src=../img/cat_'+(i+1)+'.png>'+
                            '<span>'+data[j].list[i].productName+'('+data[j].list[i].nums+')</span>'+
                            '</div>'
                        }
                        str+='</p></div>'
                    }
                    goodsDiv.html(str)
                }
            }
        })
    }








})